<template>
<div>
  <el-card>
    <div>
      <el-row v-if="role_id != 3">
        <el-form ref="roomForm" :model="roomForm" label-width="85px" label-position="left">
          <!--<el-col v-if="role_id == 1" :span="8">
            <el-form-item label="公寓名称：">
              <el-input v-model="roomForm.aptName" :clearable=true placeholder="请输入公寓编号"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8" :offset="1">
            <el-form-item label="房间编号：">
              <el-input v-model="roomForm.rid" :clearable=true placeholder="请输入房间编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item>
              <template>
                <el-button type="success" size="small" @click="onSearch">搜索</el-button>
                <el-button size="small" @click="onReset('roomForm')">重置</el-button>
              </template>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <!--表格-->
    <div class="content-header">
      <el-button v-if="role_id != 3" type="success" size="small" @click="handleAdd">添加</el-button>
    </div>
    <div>
      <el-table :data="roomData" stripe style="width: 100%" :header-cell-style="{
      'background-color': '#fafafa',
      'color': 'rgb(103, 194, 58)',
      'border-bottom': '1px rgb(103, 194, 58) solid'}">
        <el-table-column prop="rid" label="房间编号"></el-table-column>

        <el-table-column prop="aptName" label="公寓名称"></el-table-column>

        <el-table-column prop="type" label="房间类型">
          <template slot-scope="scope">
            <span>{{scope.row.type==2? '二人间':scope.row.type==4?'四人间':'八人间'}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="房间租用价格"></el-table-column>

        <el-table-column prop="useStatus" label="使用状态">
          <template slot-scope="scope">
            <span>{{scope.row.num == 0? '空闲': scope.row.num + ' 人'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="viewClick(scope.row)" class="viewButton">查看</el-button>
            <el-button v-if="role_id != 3" type="text"  @click="editClick(scope.row)" class="editButton">编辑</el-button>
            <el-button v-if="role_id != 3" type="text"  @click="deleteClick(scope.row.id)" class="deleteButton">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页-->
    <div v-if="role_id != 3">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[8, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination-warp">
      </el-pagination>
    </div>
  </el-card>
  <!--添加房间子组件-->
  <add-room ref="add" @addClickBack="addBack"></add-room>
  <!--修改房间信息子组件-->
  <edit-room ref="edit" @editClickBack="editBack"></edit-room>

  <!-- 查看房间信息的弹出框 -->
  <el-dialog
    title="查看"
    :visible.sync="viewRoomMessage"
    width="60%"
    center>
      <el-form
      :model="viewMessage"
      label-width="100px"
      :inline="true">
        <el-form-item label="房间编号：" prop="rid">
          <el-input v-model="viewMessage.rid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="公寓名称：" prop="aptName">
          <el-input v-model="viewMessage.aptName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="房间人数：" prop="num">
          <el-input :value="viewMessage.num + '人'" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="房间类型：" prop="type">
          <el-input :value="viewMessage.type == 2? '两人间' :viewMessage.type == 4? '四人间': '八人间'" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="房间价格：" prop="price">
          <el-input :value="viewMessage.price + '元'" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="房间状态：" prop="status">
          <el-input :value="viewMessage.status == 1? '可使用': '已废弃'" :disabled="true"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="viewRoomMessage = false">取 消</el-button>
      </span>
  </el-dialog>

</div>
</template>

<script>
import addRoom from "@/components/roomComponent/addRoom";
import editRoom from "@/components/roomComponent/editRoom";
// import {request} from "../utils/request.js"
export default {
name: "room",
  data(){
  return{
    viewRoomMessage: false,
    role_id: 3,
    roomData:[],
    roomForm:{
      apt_id:'',
      type:''
    },
    pagenum:1,//当前页数
    pagesize:10,//当前页有多少条数据
    total:100,//总页数

    //查看显示框
    viewMessage: {},
    aptName: ''
    }
  },
  components:{
    addRoom,
    editRoom,
  },
  created(){
    this.getRoomList()
    //获取当前用户对应的角色
    this.getCurrentUserRule()
  },
  methods:{
    // getAptName(aptId) {
    //   request({
    //     url: '/apartment/getOneApartment',
    //     data: {
    //       id: aptId
    //     },
    //     method: 'post'
    //   }).then(res => {
    //     this.aptName = res.data.data.aptName
    //   })
    //   return this.aptName
    // },
    //更换房间的回调函数
    changeBack(){},
    //退出
    //监听pagesize的改变事件
    handleSizeChange(newSize){
      this.pagesize=newSize
      this.getRoomList()
    },
    //监听页码的变化
    handleCurrentChange(newPage){
      this.pagenum=newPage
      this.getRoomList()
    },
    //获得房间列表
    async getRoomList(){
      const {data:res} = await this.$http.post('/room/selectSearchRoom',{
        pageNum:this.pagenum,
        pageSize:this.pagesize
      })
      if (res.code !== 200){
        return this.$message.error("获取用户信息失败")
      }
      this.roomData = res.data.list

      this.total = res.data.total
    },
    //获取当前用户角色对应的方法
    async getCurrentUserRule(){
      const {data:res} = await this.$http.post('/util/getJWTMessage', {
        "token": window.localStorage.getItem('token'),
        "keyName": "role_id"//获取的是当前角色对应的 rule_id
      })
      this.role_id = res.data
    },
  //表单搜索
    async onSearch(){
      let params={
        apt_id: this.roomForm.apt_id,
        r_id:this.roomForm.rid,
        pageNum:this.pagenum,
        pageSize:this.pagesize,
        status:this.status
      }
      const {data:res}= await this.$http.post('/room/selectSearchRoom', params)
      this.roomData=res.data.list
      this.total = res.data.total
    },
    //表单重置
    onReset(){
      this.$refs.roomForm.resetFields()
      this.getRoomList()
    },
    //添加房间信息
    handleAdd(){
      this.$refs.add.init()
    },
  //  添加子组件的回调函数
    addBack(){
      this.getRoomList()
    },
  //  查看房间信息
    async viewClick(row){
      this.viewMessage = row
      //根据公寓号查询对应的公寓名称
      const {data:res}= await this.$http.post('/apartment/getOneApartment', {
        id: this.viewMessage.aptId
      })

      this.viewMessage.aptName = res.data.aptName


      this.viewRoomMessage = true
    },
   //修改房间信息
    editClick(row){
      this.$refs.edit.init(row)
    },
   //修改子组件的回调函数
    editBack(){
      this.getRoomList()
    },
   //删除房间信息
    deleteClick(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/room/deleteRoomById/'+id).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRoomList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    }
  }
}
</script>

<style scoped>

</style>